<template>
  <div id="crumbsbar">
    <el-row class="crumbs" type="flex" justify="space-between">
      <el-col :span="12" :class="crumbs.class||'t-a-r'">
        <slot></slot>
      </el-col>
      <el-col :span="crumbs.span&&crumbs.span[0]||6" :offset="(11-crumbs.span[0]-crumbs.span[1])" class="t-a-r">
        <div class="crumbs-search">
          <el-form ref="searchForm" :rules="crumbs.formRules||formRules" :model="formData" @submit.native.prevent>
            <el-form-item prop="searchWord">
              <el-input v-model.trim="formData.searchWord"
                        :maxlength="20"
                        :placeholder="crumbs.placeholder"
                        @keyup.enter.native="handlerSearch('searchForm')"
                        class="handle-input">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </el-form-item>
          </el-form>
          <el-button class="bg-btn" style="" @click="handlerSearch('searchForm')">搜索</el-button>
        </div>
      </el-col>
      <el-col :span="crumbs.span&&crumbs.span[1]||0">
        <el-row type="flex" justify="end">
          <!-- <el-button class="bg-btn" style="width:100%" @click="handlerSearch('searchForm')">搜索</el-button> -->
          <!--<el-button class="bg-btn" @click="handlerReset('searchForm')">重置</el-button>-->
          <slot name="other"></slot>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    name: 'crumbsbar',
    data() {
      return {
        formData: {
          searchWord: '',
        },
        formRules: {
          searchWord: [
            {pattern: /^[\u4E00-\u9FA5A-Za-z0-9]+$/, message: '不能用特殊符号', trigger: 'change'}
          ]
        }
      }
    },
    props: ['crumbs', 'searchWord'],
    methods: {
      handlerSearch(formName) {
        // console.log(111)
        // if (!this.formData.searchWord) {
        //   this.$message.error('检索内容不能为空!');
        //   return;
        // }
        /** this.$refs 这是跨组件传值的方法 **/
        this.$refs[formName].validate(valid => {
          if (valid) {
            // console.log("search1");
            this.$emit('handlerSearch', this.formData.searchWord)
          }
        })
      }
    },
    watch: {
      searchWord(n, o) {
        this.formData.searchWord = n;
      }
    }
  }
</script>
<style scoped>
</style>
